<template>
    <div class="address">
        <van-nav-bar
                title="地址管理"
                left-arrow
                @click-left="backUp"
                :right-text="content"
                @click-right="setDefault"
        ></van-nav-bar>
        <van-address-list v-model="chosenAddressId" :list="list" @add="onAdd" @edit="onEdit"/>
    </div>
</template>
<script>
    import {AddressList, Toast, Area, NavBar} from "vant";
    import api from "@/utils/api";

    export default {
        components: {
            [AddressList.name]: AddressList,
            [Toast.name]: Toast,
            [Area.name]: Area,
            [NavBar.name]: NavBar
        },
        data() {
            return {
                chosenAddressId: "",
                content: "设为默认",
                list: []
            };
        },
        created() {
            if (this.$route.query.type) {
                this.content = "确认";
            }
        },
        mounted() {
            this.getAddressList();
        },
        methods: {
            getAddressList() {
                this.$axios({
                    method: "GET",
                    url: api.addresslist,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res);
                    res.forEach(e => {
                        if (e.is_default) {
                            this.chosenAddressId = e.address_id;
                        }
                        let addr = {
                            id: e.address_id,
                            name: e.user_name,
                            tel: e.phone,
                            address: e.address
                        };
                        this.list.push(addr);
                    });
                });
            },
            onAdd() {
                this.$router.push({path: "/addressadd"});
            },

            onEdit(item, index) {
                this.$router.push({
                    name: "addressedit",
                    params: {address_id: item.id}
                });
            },

            setDefault() {
                this.$axios({
                    method: "POST",
                    url: api.setdefaultaddr,
                    data: this.$qs.stringify({
                        token: localStorage.getItem("token"),
                        address_id: this.chosenAddressId
                    })
                }).then(res => {
                    this.$toast("设置成功");
                    if (this.$route.query.type) {
                        setTimeout(() => {
                            this.$router.go(-1);
                        }, 500)
                    }
                });
            },

            backUp() {
                this.$router.go(-1);
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .address {
        background-color: @borderColor;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 50px;
        left: 0;
    }

    .van-button--danger {
        z-index: 999;
        transform: translateY(0);
    }

    .van-nav-bar {
        height: 44px;
        background-color: @borderColor;
    }

    .van-nav-bar__text {
        color: #323233;
    }
</style>